<template>
  <div class="login-container">
    <van-nav-bar class="page-nav-bar" title="登录" />
    <van-form @submit="onSubmit">
      <van-field name="mobile" placeholder="请输入手机号" v-model="user.mobile">
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>
      <van-field
        type="text"
        name="code"
        placeholder="请输入验证码"
        v-model="user.code"
      >
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>
        <template #button>
          <van-button round class="small-btn" size="small" type="default"
            >获取验证码</van-button
          >
        </template>
      </van-field>
      <div class="login-btn-warp">
        <van-button class="login-btn" block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'LoginPage',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '',
        code: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async onSubmit (values) {
      // 1.获取表单数据
      const user = this.user
      // 2. 验证表单数据

      // 3. 发送网络请求
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true, // 是否禁止背景点击
        duration: 0 // 0 表示永久继续下去，可以设置持续的时间单位为毫秒
      })
      try {
        const res = await login(user)
        console.log('请求成功', res)
        // 提示 success 或者 fail 的时候，会先把其它的 toast 先清除
        this.$toast.success('登陆成功')
      } catch (error) {
        if (error.response.status === 400) {
          console.log('手机号或验证码错误！')
          this.$toast.fail('用户名或者密码错误')
        } else {
          // console.log("未知的错误");
          this.$toast.fail('登陆失败，请稍后重试')
        }
      }
      // 4.实现登陆
      console.log(('submit', values))
    }
  }
}
</script>
<style lang='less' scoped>
.toutiao {
  font-size: 37px;
}
.small-btn {
  height: 46px;
  line-height: 46px;
  background-color: #ededed;
}
.login-btn-warp {
  padding: 53px 28px;
  .login-btn {
    background-color: #6db4fb;
    border: none;
  }
}
</style>
